import { useState, useEffect } from 'react'
import { Select } from 'antd';
import { LeftOutlined } from '@ant-design/icons';
// import './index.css'
// import url from '../../assets/header.png'
import { getsearch } from '../../plugins/getlogin'
import { useNavigate } from 'react-router-dom';
export const Search = () => {
    // const [aritle, setaritle] = useState([]);
    // const [img, setimg] = useState('');
    const router = useNavigate()
    useEffect(() => {
        // getinfo().then(e => {
        //     setaritle(e.data[0])
        //     setimg(e.data[1])

        // })



    }, []);

    const backartile = () => {
        router('/main')
    }
    // //----------------------------------------------------------------
    const [value, setValue] = useState();

    var list = []
    const [jun, setjun] = useState();
    const handleSearch = (newValue) => {

        if (newValue) {
            var my = { id: newValue }
            getsearch(my).then(e => {
                e.data.map(item => {

                    list.push({ value: item.title, label: item.title })
                    setjun(list)
                })
            })

        } else {
        }
    };
    const handleChange = (newValue) => {
        router('/details', { state: { title: newValue } }
        )
        setValue(newValue);
    };

    var style = {
        textAligin: 'left',
        corlor: 'red'
    }
    var ipo = {
        color: '#0094ff',
        fontSize: '2rem',
        fontWeight: '800'
    }
    return (
        <div>

            <div className='detal'>
                <LeftOutlined onClick={backartile} style={{ fontSize: '2rem' }} />

            </div>

            <div className='aritles'>
                <div style={ipo}>搜索导航</div>
                <Select
                    showSearch
                    value={value}
                    placeholder='搜索关键词'
                    allowClear={true}
                    options={jun}
                    style={style}
                    defaultActiveFirstOption={false}
                    showArrow={false}
                    filterOption={false}
                    onSearch={handleSearch}
                    onChange={handleChange}
                    notFoundContent={null}

                />
            </div>
        </div >
    )
}